<template>
    <div class="message-list-component">
        <div class="scroller-box">
            <div class="message-body"
                 @click="handleNewsJump(i)"
                 v-for="(i,index) in list"
                 :key="index">
                <div class="message-body-header" :class="{'unRead':i.unRead}">{{i.title}}</div>
                <div class="message-body-con">{{i.content}}</div>
                <div class="message-body-foot" :class="{'unRead':i.unRead}">
                    {{ dateFormat(i.noticeTime, 'YYYY-MM-DD HH:mm:ss')}}
                </div>
            </div>
        </div>
        <div class="nothing" v-if="showNone">
            <img src="../assets/img/nothing.png" alt="这里什么都没有哦">
            <p>这里什么都没有</p>
        </div>
    </div>
</template>
<script>
    /**
     * Created by 吴彦祖 on 2018/3/16.
     * Message list , for mine -> message center page
     * only one param to use:
     * @params
     * @lists {Array} the data which to show the list;
     */
    import {dateFormat} from 'vux'
    import sysApi from '../api/api';
    import statusCodeManage from '../api/statusCodeManage';

    export default {
        name: 'message-list',
        data () {
            return {
                dateFormat: dateFormat,
                active: true,
                colorActive: false
            }
        },
        props: {
            list: {
                type: Array
            },
            showNone: {
                type: Boolean,
                default: false
            }
        },
        methods: {
            // 公告跳转
            handleNewsJump (noticeItem) {
                this.$emit('on-click-notice', noticeItem);
            }
        },
    }
</script>

<style lang="less">
    @import '../style/mixin.less';

    .message-list-component {
        .nothing {
            padding-top: 50px;
            text-align: center;
            img {
                width: 120px;
                height: auto;
            }
            p {
                font-size: @font-size-small;
                line-height: 30px;
                color: @color-text-third;
            }
        }
        .message-body {
            background-color: @color-white;
            padding: 0 12px;
            .message-body-header {
                height: 40px;
                margin-top: @font-size-tiny;
                color: @color-text-third;
                line-height: 40px;
                font-size: @font-size-medium;
                .ellipsis()
            }
            .message-body-con {
                margin: 0 0 10px 0;
                color: @color-text-third;
                font-size: @font-size-small;
                .ellipsisLn(3);
            }
            .message-body-foot {
                height: 33px;
                border-top: solid 1px @color-background-default;
                line-height: 33px;
                text-align: right;
                padding-right: @font-size-tiny;
            }
            .textColor {
                color: #999;
            }
        }
        .unRead {
            color: @color-text-primary !important;
        }
    }
</style>
